<template>
    <div class="tools flex">
        <!--        <div class="map_size flex boxSize">50m</div>-->
        <div class="toolSearchInput">
            <el-input prefix-icon="el-icon-search" placeholder="请输入设备、场所、企业名称" @keyup.enter.native="getKeyLocations"
                v-model="searchContent" />
            <transition name="opacityFade">
                <div class="scroll-container toolSearchInput_options userFlex"
                    v-show="showSearch">
                    <div v-for="(item, index) in locationData" :key="item" @click.stop="searchClick(item)"
                        class="toolSearchInput_options_title boxSize">
                        {{ item.locationsName || item.deviceName }}
                    </div>
                    <div class="toolSearchInput_options-close" @click="showSearch = false"></div>
                </div>
            </transition>
        </div>
        <div class="tool_item">
            <div class="tool_name boxSize flex" @click.stop="layerClick()">
                <span>图层</span>
                <span class="tool_arr"></span>
            </div>
            <transition name="opacityFade">
                <div class="tool_options height200 userFlex tool_first_box" v-show="layerShow">
                    <el-collapse class="collapse-margin">
                        <div v-for="(item, index) in thematicOptions" :key="index">
                            <el-collapse-item>
                                <template slot="title">
                                    <div style="display: flex;flex-direction: row;align-items: center;position: relative">
                                        <div class="tools_C_item_icon" @click.stop="thematicClick(item)"
                                            :style="{ 'background-image': item.status ? `url(${require('@/assets/zfx_s.png')})` : `url(${require('@/assets/zfx.png')})` }">
                                        </div>
                                        <div class="title boxSize flex marL30">{{ item.label }}
                                        </div>
                                    </div>
                                </template>
                                <div style="display: flex;flex-direction: row;align-items: center"
                                    v-for="(citem, cindex) in item.children" :key="cindex"
                                    @click.stop="thematicChildClick(item, citem, cindex)">
                                    <div class="tools_C_item_iconc  "
                                        :style="{ 'background-image': citem.status ? `url(${require('@/assets/zfx_s.png')})` : `url(${require('@/assets/zfx.png')})` }">
                                    </div>
                                    <div class="title boxSize flex">
                                        {{ citem.label }}
                                    </div>
                                </div>
                            </el-collapse-item>
                        </div>
                    </el-collapse>
                </div>
            </transition>
        </div>
        <div class="tool_item" @click.stop="parkClick()">
            <div class="tool_name boxSize flex">
                <span>{{ selectPark }}</span>
                <span class="tool_arr"></span>
            </div>
            <transition name="opacityFade">
                <div v-show="showPark" class="tool_options">
                    <div v-for="(item, index) in parkOptions" :key="index" @click.stop="parkOptionsClick(item)"
                        :class="selectActive === item.value ? 'active title boxSize' : 'title boxSize'">
                        {{ item.label }}
                    </div>
                </div>
            </transition>
        </div>

        <div class="tool_item" @click.stop="spaceClick()">
            <div class="tool_name boxSize flex">
                <span>空间标绘</span>
                <span class="tool_arr"></span>
            </div>
            <transition name="opacityFade">
                <div v-show="areaShow" class="tool_options">
                    <div v-for="(item, index) in  areaOptions" :key="index" @click.stop="areaOptionsClick(item)"
                        :class="areaActive === item.value ? 'active title boxSize flex' : 'title boxSize flex'">
                        <div class="tool_icon"><img :src="item.icon_1" alt=""></div>
                        <div class="txt">{{ item.label }}</div>
                        <!--            <div class="tool_icon"><img :src="item.icon_2" alt=""></div>-->
                    </div>
                </div>
            </transition>
        </div>
        <div class="tool_item" @click="toolClick()">
            <div class="tool_name boxSize flex">
                <span>空间测量</span>
                <span class="tool_arr"></span>
            </div>
            <transition name="opacityFade">
                <div v-show="toolShow" class="tool_options">
                    <div v-for="(item, index) in toolOptions" :key="index" @click.stop="toolOptionsClick(item)"
                        :class="toolActive === item.value ? 'active title boxSize flex' : 'title boxSize flex'">
                        <div class="tool_icon"><img :src="item.icon_1" alt=""></div>
                        <div class="txt">{{ item.label }}</div>
                    </div>
                    <div class="child-tiji" v-show="tijiActive">
                        <div v-for="(item, index) in [{
                            label: '1.选取测量区域',
                            value: 9
                        }, {
                            label: '2.选取测量高度',
                            value: 10
                        }]" :key="index" @click.stop="toolOptionsClick(item)"
                            :class="tijiActive && tijiActiveIndex === item.value ? 'active title boxSize flex tiji' : 'title boxSize flex tiji'">
                            <div class="txt">{{ item.label }}</div>
                        </div>

                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import {
    sendAreaDeviceMsg, sendCLoseMeasureMsg,
    sendDistributionMsg,
    sendEquipmentInitMsg,
    sendEditModeMsg, sendEquipment0Msg, sendEquipment1Msg, sendLocationMsg, sendMonitorMsg,
    sendPlottingMsg,
    sendSceneEditingMsg,
    sendscreenshotMsg,
    sendSensorMsg,
    sendToUeMsg
} from "@/utils/UeMessageUtils";
import { mapActions } from "vuex";
import axios from "axios";
import { getDeviceData, getDeviceTypes, getKeyLocations } from "@/api/area";

export default {
    name: "tool",
    props: {
        panelValue1: [String, Boolean],
    },
    data() {
        return {
            deviceCodeConf: {
                101: 'rcx', //熱成像
                102: 'yy', //鹰眼监控摄像机
                107: 'dlgq', //"道路高清摄像机"
                108: 'lscs', //"雷视测速预警一体机"
                110: 'gq', //高清摄像机
            },
            locationData: '',//开放位置数据
            selectLocationData: '',//选择的开放位置数据
            searchContent: '',
            tijiActive: false,
            tijiActiveIndex: 0,
            map: 1,//0 2d  ， 1 3d
            mapModel: '3D',
            measureData: [[], [], []],//测绘结果
            // 园区总览
            monseIsStart: false,
            showPark: false,
            showSearch: false,//战死搜索下拉列表
            selectActive: 0,
            //温度传感器
            sensorOptions: [
                { status: false, label: '气体', flag: 'qt' },
                { status: false, label: '温度', flag: 'wd' },
                { status: false, label: '湿度', flag: 'sd' },
                { status: false, label: '烟雾', flag: 'yw' },
                { status: false, label: '用电', flag: 'yd' },
                { status: false, label: '压力', flag: 'yl' },
                { status: false, label: '噪音', flag: 'zy' },
            ],
            //监控
            controlOptions: [
                { status: false, label: '高清监控', flag: 'gq' },
                { status: false, label: '高点监控', flag: 'gd' },
                { status: false, label: '鹰眼监控', flag: 'yy' },
                { status: false, label: '卡口监控', flag: 'kk' },
                { status: false, label: '排污监控', flag: 'pw' },
            ],
            opList: [
                {
                    status: false, label: '道路高清摄像机', childData: [], flag: 'dlgq'
                },
                {
                    status: false, label: '雷视测速预警一体机', childData: [], flag: 'lscs'
                },
                {
                    status: false, label: '高点热成像', childData: [], flag: 'gdrc'
                },
                {
                    status: false, label: '鹰眼监控摄像机', childData: [], flag: 'yyjk'
                },
                {
                    status: false, label: '网络存储设备', childData: [], flag: 'wlcc'
                },
                {
                    status: false, label: '高清摄像头', childData: [], flag: 'gqsx'
                },
            ],
            //专题图生成
            thematicOptions: [],
            selectPark: '园区总览',
            parkOptions: [
                { value: 0, label: '园区总览' },
                { value: 1, label: '能源化工园' },
                { value: 2, label: '精细化工园' },
                { value: 3, label: '综合利用园' },
                { value: 4, label: '敖镇综合产业园' },
            ],
            // 图层
            layerShow: false,
            // 空间标绘
            areaShow: false,
            areaActive: 0,
            areaOptions: [
                {
                    value: 1,
                    label: '箭头',
                    icon_1: require('@/assets/monitor/tool_icon/icon_1.png'),
                    icon_2: require('@/assets/monitor/tool_icon/icon_2.png')
                },
                {
                    value: 2,
                    label: '线段',
                    icon_1: require('@/assets/monitor/tool_icon/icon_3.png'),
                    icon_2: require('@/assets/monitor/tool_icon/icon_4.png')
                },
                {
                    value: 3,
                    label: '矩形',
                    icon_1: require('@/assets/monitor/tool_icon/icon_7.png'),
                    icon_2: require('@/assets/monitor/tool_icon/icon_6.png')
                },
                {
                    value: 4,
                    label: '圆形',
                    icon_1: require('@/assets/monitor/tool_icon/icon_5.png'),
                    icon_2: require('@/assets/monitor/tool_icon/icon_8.png')
                },
                {
                    value: 5,
                    label: '波浪线',
                    icon_1: require('@/assets/monitor/tool_icon/icon_wavyline.svg'),
                    icon_2: require('@/assets/monitor/tool_icon/icon_wavyline.svg')
                },
                // {
                //     value: 6,
                //     label: '箭头',
                //     icon_1: require('@/assets/monitor/tool_icon/icon_arrow.png'),
                // },
                {
                    value: 7,
                    label: '绘制区域',
                    icon_1: require('@/assets/monitor/tool_icon/icon_area.png'),
                },
                {
                    value: 8,
                    label: '标点',
                    icon_1: require('@/assets/monitor/tool_icon/icon_mark.png'),
                },
                // {
                //   value: 9,
                //   label: '清空点位',
                //   icon_1: require('@/assets/monitor/tool_icon/icon_21.png')
                // },
                // {
                //   value: 5,
                //   label: '标签',
                //   icon_1: require('@/assets/monitor/tool_icon/icon_9.png'),
                //   icon_2: require('@/assets/monitor/tool_icon/icon_10.png')
                // },
            ],
            area2DOptions: [
                {
                    value: 1,
                    label: '箭头',
                    icon_1: require('@/assets/monitor/tool_icon/icon_arrow.png'),
                },
                {
                    value: 2,
                    label: '绘制区域',
                    icon_1: require('@/assets/monitor/tool_icon/icon_area.png'),
                },
                {
                    value: 3,
                    label: '标点',
                    icon_1: require('@/assets/monitor/tool_icon/icon_mark.png'),
                },
                {
                    value: 4,
                    label: '清空',
                    icon_1: require('@/assets/monitor/tool_icon/icon_21.png')
                },
            ],
            // 工具集
            toolShow: false,
            toolActive: 0,
            toolOptions: [
                { value: 1, label: '测距', icon_1: require('@/assets/monitor/tool_icon/icon_11.png') },
                // {value: 2, label: '周长', icon_1: require('@/assets/monitor/tool_icon/icon_12.png')},
                { value: 3, label: '面积', icon_1: require('@/assets/monitor/tool_icon/icon_13.png') },
                // {value: 4, label: '体积', icon_1: require('@/assets/monitor/tool_icon/tiji.png')},
                { value: 5, label: '地表距离', icon_1: require('@/assets/monitor/tool_icon/icon_14.png') },
                { value: 6, label: '地表面积', icon_1: require('@/assets/monitor/tool_icon/icon_15.png') },
                // {value: 7, label: '地表周长', icon_1: require('@/assets/monitor/tool_icon/icon_16.png')},
            ],
        }
    },
    watch: {
        panelValue1() {
            // sendEditModeMsg(0)
            // this.$emit('selectParkImp', this.selectActive)
            // this.showPark = false
            // this.toolShow = false
            // this.areaShow = false
            // this.toolActive = 0
            // this.areaActive = 0

            sendEditModeMsg(0)
            this.showPark = false
            this.toolShow = false
            this.areaShow = false
            this.showSearch = false
            this.layerShow = false
            this.toolActive = 0
            this.areaActive = 0
        },
        toolShow(nV) {
            if (!nV) {
                sendCLoseMeasureMsg()
            }
        },
        showSearch(nV, oV) {
            if (!nV && this.selectLocationData) {
                sendLocationMsg(this.selectLocationData, 0)
            }
            if (!nV) {
                this.selectLocationData = ''
            }
        }
    },
    mounted() {
        this.init();
        // this.getDeviceData()
    },
    methods: {
        ...mapActions({
            setInfo: 'setting/setInfo',
            setPark: 'setting/setPark',
        }),
        async claerDevice() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    sendToUeMsg({ hideAllDevice: 1 })
                    resolve()
                },3300);
            })
        },
        // 初始化 => 调用获取设备分类列表接口 => 调用获取设备列表接口
        async init() {
            await this.claerDevice()
            await this.getDeviceTypeList();
            await this.getDeviceList();
        },
        // 获取设备type  如果有自定义的 使用自定义
        getDeviceCustomType(item) {
            console.log('获取设备type', item)
            return this.deviceCodeConf[item.deviceType || item.dictKey] || (item.deviceType || item.dictKey)
        },
        // 调用获取设备分类列表接口
        async getDeviceTypeList() {
            const res = await getDeviceTypes();

            if (res && res.data && res.data.data) {
                this.thematicOptions = res.data.data.map(item => {
                    return {
                        ...item,
                        label: item.dictValue,
                        flag: item.dictKey,
                        status: true,
                        children: [...item.children.map(child => {
                            child.label = child.dictValue;
                            child.status = true;
                            if (!child.children) child.children = []
                            return child
                        })],
                    }
                })
                // console.log('调用获取设备分类列表接口', this.thematicOptions)
            }
        },
        // 调用获取设备列表接口
        async getDeviceList() {
            const res = await getDeviceData();
            // console.log('调用获取设备列表接口', res.data.data)
            // const needMsgList = [];
            if (res && res.data && res.data.data) {
                res.data.data.map(item => {
                    this.thematicOptions.forEach((cItem, index) => {
                        cItem.children.forEach((childItem) => {
                            if (childItem.dictKey === item.deviceType) {
                                // console.log('可用设备', item)
                                let type = this.getDeviceCustomType(item)
                                // if (!needMsgList.find(itype => itype.type === type)) {
                                //     needMsgList.push({
                                //         type: type,
                                //         name: item.deviceTypeName
                                //     })
                                // }
                                sendEquipmentInitMsg({
                                    long: item.longitude,
                                    lat: item.latitude,
                                    // 是五种监控视频设备的时候 用 channelCode 其他的用 id
                                    // key: this.deviceCodeConf[item.deviceType] ? (item.channelCode || item.deviceId) : item.deviceId,
                                    key: this.deviceCodeConf[item.deviceType] ? (item.channelCode || item.deviceId ) : item.deviceId,
                                    id: item.id,
                                    type: type,
                                    deviceTypeName: item.deviceTypeName,
                                    initEquipment: 1,
                                })
                                childItem.children.push({
                                    ...item,
                                    label: item.deviceName,
                                    flag: item.id
                                })
                            }
                        });
                    })
                })
                // console.log('可用设备', needMsgList)
                // console.log('处理完设X备分类列表数据', this.thematicOptions)
            }
        },
        //展示园区菜单栏
        parkClick() {
            var bool = this.dealData.cloneDeep(!this.showPark)
            // if (this.$route.path !== '/attractinvest') {
            this.setInfo(true)
            this.closeAllDropDownMenu(true)
            // }
            this.showPark = bool
        },
        // 园区总览
        searchClick(obj) {
            if (this.selectLocationData) {
                sendLocationMsg(this.selectLocationData, 0)
            }
            this.selectLocationData = obj
            sendLocationMsg(obj, 1)
        },
        // 园区总览 & other
        parkOptionsClick(obj) {
            // if (this.selectActive !== obj.value) {
            this.selectActive = obj.value
            this.selectPark = obj.label
            var descriptor = ''
            switch (this.selectActive - 0) {
                case 0: {
                    // descriptor = {'vDoing': 1}
                    descriptor = { 'yqzl': 1 }
                    break
                }
                case 1: {
                    descriptor = { 'camera': 11 }
                    break
                }
                case 2: {
                    descriptor = { 'camera': 12 }
                    break
                }
                case 3: {
                    descriptor = { 'camera': 13 }
                    break
                }
                case 4: {
                    descriptor = { 'camera': 14 }
                    break
                }
            }
            window.emitUIInteraction(descriptor);
            // }

            // if (this.$route.path !== '/attractinvest') {
            //     this.closeAllDropDownMenu()
            // }
            this.showPark = false
            this.setPark(this.selectActive)
        },
        // 工具集
        toolOptionsClick(obj) {
            sendCLoseMeasureMsg()
            // this.closeAll();
            var descriptor = {}
            switch (obj.value) {
                case 1://测距
                    descriptor = { 'lengthMeasure': 1 }
                    break
                case 2://周长
                    descriptor = { 'lengthMeasure': 1 }
                    // 显示标签弹窗
                    this.tijiActive = false
                    this.unitDialogShow = true;
                    break;
                case 3://面积
                    descriptor = { 'areaMeasure': 1 }
                    break
                case 4://体积
                    break
                case 5://地表距离
                    descriptor = { 'earthLength': 1 }
                    break
                case 6://地表面积
                    descriptor = { 'earthArea': 1 }
                    this.tijiActive = false
                    break
                case 7://地表周长
                    descriptor = { 'earthArea': 1 }
                    this.toolActive = obj.value
                    this.tijiActive = true
                    break
            }
            window.emitUIInteraction(descriptor);

            console.log(obj)
            if (this.tijiActive) {
                this.tijiActiveIndex = obj.value
            }
            if (this.toolActive !== obj.value && !this.tijiActive) {
                this.toolActive = obj.value
            }
        },
        //工具集点击事件
        toolClick() {
            this.setInfo(false)
            var bool = this.dealData.cloneDeep(!this.toolShow)
            this.closeAllDropDownMenu()
            this.toolShow = bool

            if (this.toolShow) { // 初始化空间标绘
                this.unitDialogShow = true
                //重置空间标绘
                this.areaActive = 0
                this.arrDialogShow = false
                this.tagDialogShow = false
                //工具数据弹窗
                this.$emit('showCaltool', true)
            } else {
                this.$emit('showCaltool', false)
                var descriptor = ''
                descriptor = { 'lengthMeasure': 0 }
                window.emitUIInteraction(descriptor);
                var descriptor1 = ''
                descriptor1 = { 'areaMeasure': 0 }
                window.emitUIInteraction(descriptor1);
                var descriptor2 = ''
                descriptor2 = { 'earthLength': 0 }
                window.emitUIInteraction(descriptor2);
                var descriptor3 = ''
                descriptor3 = { 'earthArea': 0 }
                window.emitUIInteraction(descriptor3);
            }
        },
        moveUnit(event) {
            if (this.monseIsStart) {
                console.log(event.pageX, event.pageY)
                this.mx = event.pageX
                this.my = event.pageY
            }
        },
        //获取开放位置
        async getKeyLocations() {
            this.setInfo(true)
            // var bool = this.dealData.cloneDeep(!this.showSearch)
            this.closeAllDropDownMenu(true, true)
            this.showSearch = true
            if (this.showSearch) {
                // 初始化工具集
                this.toolActive = 0
                this.unitDialogShow = false
                this.girthDialogShow = false
                //重置空间标绘
                this.areaActive = 0
                this.arrDialogShow = false
                this.tagDialogShow = false
                //工具数据弹窗
                this.$emit('showCaltool', false)
            }

            var _this = this
            this.locationData = ''
            var params = {
                // 'size': 1000,
                // 'current': 1,
                'locationsName': this.searchContent
            }
            console.log(this.searchContent, '以昂扬')
            await getKeyLocations(params).then(res => {
                if (res && res.data && res.data.data) {
                    _this.locationData = res.data.data
                }
            })
        },
        //图层点击事件
        layerClick() {
            // this.setInfo(true)
            var bool = this.dealData.cloneDeep(!this.layerShow)
            console.log(bool)
            this.closeAllDropDownMenu(true)
            this.layerShow = bool
            if (!this.layerShow) {
                // 初始化工具集
                this.toolActive = 0
                this.unitDialogShow = false
                this.girthDialogShow = false
                //重置空间标绘
                this.areaActive = 0
                this.arrDialogShow = false
                this.tagDialogShow = false
                // //工具数据弹窗
                // this.$emit('showCaltool', false)
                // this.setInfo(true)

            } else {
                // this.setInfo(false)
                // this.$emit('closeBottomPane')
                // this.$emit('panelValue', false)
            }
        },
        //空间标绘点击事件
        spaceClick() {
            this.setInfo(false)
            var bool = this.dealData.cloneDeep(!this.areaShow)
            this.closeAllDropDownMenu()
            this.areaShow = bool
            if (this.areaShow) { // 初始化工具集
                this.toolActive = 0
                this.unitDialogShow = false
                this.girthDialogShow = false
            } else sendEditModeMsg(0)
        },
        // 空间标绘
        areaOptionsClick(obj) {
            // if (this.mapModel === '2D') {
            //   this.closeAllDropDownMenu();
            //   this.areaShow = false;
            //   switch (obj.value) {
            //     case 1:
            //       // 画箭头
            //       this.$event.emit('draw::arrow');
            //       break;
            //     case 2:
            //       // 画线段
            //       this.$event.emit('draw::area');
            //       break;
            //     case 3:
            //       // 画矩形
            //       this.$event.emit('draw::mark');
            //       break;
            //     case 4:
            //       // 清空
            //       this.$event.emit('draw::clear');
            //       break;
            //   }
            //   return;
            // }
            sendEditModeMsg(1)
            var descriptor = {}
            switch (obj.value) {
                case 1:
                    // 显示箭头弹窗
                    descriptor = { 'sceneEditing': 21, 'modelType': 1 }
                    this.arrDialogShow = true;
                    break;
                case 2: //线段
                    descriptor = { 'sceneEditing': 22, 'modelType': 4 }
                    break;
                case 3: //矩形
                    descriptor = { 'sceneEditing': 23, 'modelType': 0 }
                    break;
                case 4: //圆形
                    descriptor = { 'sceneEditing': 24, 'modelType': 2 }
                    break;
                case 5: //波浪形
                    // 显示标签弹窗
                    descriptor = { 'sceneEditing': 25, 'modelType': 3 }
                    // this.tagDialogShow = true;
                    break;
                case 6:
                    // 画箭头
                    this.$event.emit('draw::arrow');
                    break;
                case 7:
                    // 画区域
                    this.$event.emit('draw::area');
                    sendAreaDeviceMsg(1)
                    break;
                case 8:
                    // 画标点
                    this.$event.emit('draw::mark');
                    break;
                case 9:
                    // 清空
                    this.$event.emit('draw::clear');
                    break;
            }
            setTimeout(function () {
                window.emitUIInteraction(descriptor);
            }, 1000
            )
            if (this.areaActive !== obj.value) {
                this.areaActive = obj.value
            }
        },
        // 切换2D 3D
        mapModelClick() {
            this.setInfo(false)
            this.closeAllDropDownMenu()
            this.mapModel = this.mapModel === '2D' ? '3D' : '2D';
            this.$store.commit('updateMapMode', this.mapModel);
            var value = 0
            if (this.mapModel === '3D') {
                value = 1
            }
            this.$emit('mapModeChange', {
                mode: this.mapModel,
            });
            let descriptor = {
                vDoing: value
            }
            window.emitUIInteraction(descriptor);
            var descriptor4 = ''
            descriptor4 = { 'lengthMeasure': 0 }
            window.emitUIInteraction(descriptor4);
            var descriptor1 = ''
            descriptor1 = { 'areaMeasure': 0 }
            window.emitUIInteraction(descriptor1);
            var descriptor2 = ''
            descriptor2 = { 'earthLength': 0 }
            window.emitUIInteraction(descriptor2);
            var descriptor3 = ''
            descriptor3 = { 'earthArea': 0 }
            window.emitUIInteraction(descriptor3);
        },
        //关闭所有下拉菜单
        closeAllDropDownMenu(showBottom, closeSearch) {
            sendEditModeMsg(0)
            this.$emit('selectParkImp', this.selectActive)
            if (showBottom) {
                this.$emit('showBottomPane')
            } else this.$emit('closeBottomPane')

            this.$emit('panelValue')
            this.showPark = false
            this.toolShow = false
            this.areaShow = false
            if (!closeSearch) {
                this.showSearch = false
            }
            this.layerShow = false
            this.toolActive = 0
            this.areaActive = 0
            // sendEquipment0Msg('fxqy')
            // this.thematicOptions.forEach(item => {
            //   item.status = false
            // })
            // this.controlOptions.forEach(item => {
            //   item.status = false
            //   sendEquipment0Msg(item.flag)
            // })
            // this.sensorOptions.forEach(item => {
            //   item.status = false
            //   sendEquipment0Msg(item.flag)
            // })
        },

        //图层点击监听
        thematicClick(value) {
            value.status = !value.status
            value.children.forEach(item => {
                if (value.status) {
                    sendToUeMsg({ showDeviceType: this.getDeviceCustomType(item) })
                    // item.children.map(child => {
                    //     sendEquipment1Msg(child.id)
                    // })
                } else {
                    sendToUeMsg({ hideDeviceType: this.getDeviceCustomType(item) })
                    // item.children.map(child => {
                    //     sendEquipment0Msg(child.id)
                    // })
                }
                item.status = value.status ? true : false;

            })
            return
        },
        //图层子级点击监听
        thematicChildClick(parentItem, item, index) {
            item.status = !item.status;
            if (item.status) { //显示
                sendToUeMsg({ showDeviceType: this.getDeviceCustomType(item) })
                // item.children.map(child => {
                //     sendEquipment1Msg(child.id)
                // })
            } else { // 隐藏
                sendToUeMsg({ hideDeviceType: this.getDeviceCustomType(item) })
                // item.children.map(child => {
                //     sendEquipment0Msg(child.id)
                // })
            }
            parentItem.status = parentItem.children.every(child => child.status)

            // //当前节点的父节点不是已选择的父结点，清空选择数据
            // // this.thematicOptions.forEach(item => {
            // //     if (item.label != fValue.label) {
            // //         item.status = false
            // //         if (item.childData) {
            // //             item.childData.forEach(cItem => {
            // //                 cItem.status = false
            // //                 //发送隐藏消息
            // //                 sendEquipment0Msg(cItem.flag)
            // //             })
            // //         }
            // //     }
            // // })
            // fValue.status = allTrue

            // value.status = !value.status

            // var allTrue = true
            // fValue.childData.forEach(item => {
            //     if (!item.status) {
            //         allTrue = false
            //     }
            // })
            // fValue.status = allTrue

            // if (value.status) {
            //     //发送显示消息
            //     sendEquipment1Msg(value.id)
            // } else {
            //     sendEquipment0Msg(value.id)
            //     //发送隐藏消息
            // }

        },
        //传感器点击事件
        sensorClick(value, index) {
            // this.sensorOptions.forEach(item => {
            //   if (item != value) {
            //     item.status = false
            //   }
            // })
            // sendEquipment0Msg('fxqy')
            // this.thematicOptions.forEach(item => {
            //   item.status = false
            // })
            // this.thematicOptions[1].status = true
            // this.controlOptions.forEach(item => {
            //   item.status = false
            //   sendEquipment0Msg(item.flag)
            // })
            value.status = !value.status
            if (value.status) {
                sendEquipment1Msg(value.flag)
            } else sendEquipment0Msg(value.flag)
            var allTrue = true
            this.sensorOptions.forEach(item => {
                if (!item.status) {
                    allTrue = false
                }
            })
            if (allTrue) {
                this.thematicOptions[0].status = true
            }
            console.log("aaaa", this.sensorOptions)
            // sendSensorMsg(value.flag)
        },
        //监控点击事件
        controlClick(value, index) {
            // sendEquipment0Msg('fxqy')
            // this.thematicOptions.forEach(item => {
            //   item.status = false
            // })
            // this.thematicOptions[2].status = true
            // this.sensorOptions.forEach(item => {
            //   item.status = false
            //   sendEquipment0Msg(item.flag)
            // })
            value.status = !value.status
            if (value.status) {
                sendEquipment1Msg(value.flag)
            } else sendEquipment0Msg(value.flag)
            var allTrue = true
            this.controlOptions.forEach(item => {
                if (!item.status) {
                    allTrue = false
                }
            })
            if (allTrue) {
                this.thematicOptions[1].status = true
            }
            // sendMonitorMsg(value.flag)
        },

    }
}
</script>
<style>
.toolSearchInput{
position: relative;
}
.el-collapse-item__arrow,
.el-icon-arrow-right {
    display: none;
}
.el-input--prefix .el-input__inner {
    padding-left: 40px;
}
.collapse-margin {
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-y: auto;
}

.toolSearchInput .el-icon-search:before {
    height: 20px !important;
    line-height: 19px;
}

.el-input__icon .el-icon-search {
    height: 13px !important;
    /*line-height: 15px !important;*/
}

.toolSearchInput .el-icon-search:before {
    top: 10% !important;
    margin-right: 5px;
}

.collapse-margin::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.el-collapse-item__content {
    padding-bottom: 0px;
}

.el-collapse-item__header {
    height: 30px;
    line-height: 30px;
    background-color: transparent;
    border-bottom: 0px;
}

.el-collapse-item__wrap {
    background-color: transparent;
}

.el-collapse,
.el-collapse-item__wrap {
    border: none;
}
</style>
<style lang="scss">
@import "@/styles/scrollbar.scss";

.toolSearchInput {
    width: 200px;
    height: 21px;
    background-color: rgba(0, 26, 68, 0.5);



    .el-input {
        border: 0px;
        height: 100%;
        width: 100%;
    }

    .el-input__inner {
        height: 21px !important;
        line-height: 21px;
        color: #D8E8EC;
        font-size: 9px;
        border: 0px;
        background: rgba(98, 183, 255, 0.2);
        box-shadow: inset 0px 0px 0.625vw 0px #62B7FF //background-color: transparent;
    }

    //"><i class="el-input__icon el-icon-search"></i></span>
    //.el-icon-search{
    //  max-height: 10px;
    //  background-color: #FF5035;
    //}


    .el-icon-search:before {
        content: "\e778";
        position: absolute;
        top: 10%;
    }

    &_options {
        width: 100%;
        max-height: 220px;
        min-height: 40px;
        padding-bottom: 20px;
        background-color: rgba(0, 26, 68, 0.5);
        position: relative !important;

        &_title {
            padding: 6px 0 6px 0px;
            display: flex;
            cursor: pointer;
            flex-direction: row;
            font-size: 10px;
            align-items: center;
            justify-content: center;
            color: #DDF8FF;

            &:hover {
                background-color: #8c939d;
            }

            .tool_icon {
                width: 10px;
                height: 10px;
                background-size: 100% 100%;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-size: 100% 100%;
                }
            }

            .txt {
                margin: 0 6px;
            }
        }

        .title.active {
            color: #00E6FF;
        }
        &-close {
            cursor: pointer;
            width: 10px;
            left: 50%;
            bottom: 5px;
            transform: translate(-50%);
            position: absolute !important;
            height: 10px;
            background-size: 100% 100%;
            background-image: url("@/assets/setting/icon_close.png");
            //background-color: #ffffff;

            &:hover {
                opacity: 0.8;
            }
        }
    }
}


.tools {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
    margin-left: 30px;
    margin-top: 11px;

}
</style>

<style lang="scss" scoped>

.userFlex {
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}
.height200 {
    height: 200px;
}

.marL30 {
    text-align: left;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
    position: absolute;
    left: 20px;
}

.tools {
    left: 48%;
    transform: translate(-50%);
    position: absolute;
    top: 60px;
    width: 650px;
    display: flex;
    flex-direction: row;
    align-items: start;


    &_C {
        width: 120px;
        margin-top: 10px;
        height: 170px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        &_item {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;

            &_icon {
                margin-left: 4px;
                margin-right: 8px;
                width: 10px;
                height: 10px;
                background-size: 100% 100%;
            }

            &_iconc {
                margin-left: 14px;
                width: 10px;
                margin-right: 8px;
                height: 10px;
                background-size: 100% 100%;
            }

            &_name {
                margin-left: 2px;
                height: 17px;
                font-size: 13px;
                font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
                font-weight: normal;
                color: #D8E8EC;
                line-height: 17px;
            }
        }

    }

    .child-tiji {
        position: absolute;
        top: 120px;
        right: -30px;
        background-color: #212f46;

        .tiji {
            padding-left: 0 !important;
        }
    }

    .map_size {
        margin-right: 22px;
        width: 44px;
        height: 21px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 6px;
        color: #D8E8EC;
    }

    .width120 {
        width: 120px;
    }


    .tool_item {
        width: 120px;
        background-color: rgba(0, 26, 68, 0.5);
        cursor: pointer;

        .tool_name {
            height: 22px;
            //padding-top: 3px;
            line-height: 22px;
            width: 100%;
            text-align: center;
            color: #D8E8EC;
            font-size: 10px;
        }

        .tool_arr {
            width: 8px;
            height: 8px;
            background-size: 100% 100%;
            background-image: url("@/assets/monitor/air/arr_dropdown.png");
        }

        .tool_options {
            width: 100%;

            &.tool_first_box {
                // width: 200%;
                overflow-x: auto;
                // background-color: rgba(0, 26, 68, .5);
            }

            .title {
                cursor: pointer;
                padding: 6px 0 6px 0px;
                display: flex;
                flex-direction: row;
                font-size: 8px;
                align-items: center;
                justify-content: center;
                color: #DDF8FF;

                .tool_icon {
                    width: 10px;
                    height: 10px;
                    background-size: 100% 100%;

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-size: 100% 100%;
                    }
                }

                .txt {
                    margin: 0 6px;
                }
            }

            .title.active {
                color: #00E6FF;
            }
        }
    }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;

    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }

    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }

    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }

    .tools {
        top: calHeight_2k(60px);
    }

    .height200 {
        height: calHeight_2k(200px);
    }
}
</style>